import "./index.scss";
import Alert from "./Alert";
import { useState ,useRef, useEffect} from "react";
import ReactDOM from "react-dom";
import Son from './Son'
import Child from './Child'
const App = () => {
  //获取根元素
  const root = document.getElementById("root");
  const [visible, setVisible] = useState(false);
  const ref = useRef()
  let [root,setRoot] = useState(null);
  useEffect(()=>{
      setRoot(document.getElementById('lx'))
  },[])
  return (
    <div className="box">
      <Child></Child>
      {visible && ref.current && ReactDOM.createPortal(<Child setVisible={setVisible}></Child>,root)}
      <button onClick={() => setVisible(true)}>alert</button>
    </div>
  );
};
export default App;
